<!-- 添加案件 详情页 -->
<template>
	<view class="add-case-detail-box">
		<view class="case-item-box" @click="caseTypeShow = true">
			<view class="">类型</view>
			<view class="">
				{{ addCaseData.case_type }}
				<u-select v-model="caseTypeShow" :list="caseTypeList" @confirm="selectCaseType"></u-select>
			</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</view>
		<view class="case-item-box" @click="caseCauseShow = true">
			<view class="">案由</view>
			<view class="">
				{{ addCaseData.case_cause }}
				<u-select v-model="caseCauseShow" :list="caseCauseList" @confirm="selectCaseCause"></u-select>
			</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</view>
		<view class="case-item-box" @click="caseTrialShow = true">
			<view class="">庭审</view>
			<view class="">
				{{ addCaseData.case_trial }}
				<u-select v-model="caseTrialShow" :list="caseTrialList" @confirm="selectCaseTrial"></u-select>
			</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</view>
		
		<!-- 原告 -->
		<navigator class="case-item-box" url="/myPackageA/pages/views/add-case-detail-user?id=1">
			<view style="color: #00C9B1">原告</view>
			<view class="">{{addCaseData.case_plaintiff.case_user_name}}</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</navigator>
		<!-- 被告 -->
		<navigator class="case-item-box" url="/myPackageA/pages/views/add-case-detail-user?id=2">
			<view style="color: #00C9B1">被告</view>
			<view class="">{{addCaseData.case_defendant.case_user_name}}</view>
			<u-icon class="icon" name="arrow-right" color="#97979F" size="25"></u-icon>
		</navigator>
		
		<!-- 底部的确认按钮 -->
		<bottom-btn text="确认" @click="defineClick"></bottom-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 添加案件所需数据对象
			addCaseData: {
				case_type: '请选择', 	// 案件类型
				case_cause: '请选择', 	// 选择案由
				case_trial: '请选择', 	// 选择庭审
				// 原告 数据对象
				case_plaintiff: {
					case_user_name: '请完善',
				},
				// 被告 数据对象
				case_defendant: {
					case_user_name: '请完善',
				},
			},
			caseTypeShow: false,	// 用于控制 select 选择器的显示与隐藏
			caseTypeValue: 0,	// 用于判断是否完成对应选择器的选择(第一项时值为 1)
			caseCauseShow: false,
			caseCauseValue: 0,
			caseTrialShow: false,
			caseTrialValue: 0,
			// 案件 可选类型列表数据
			caseTypeList: [],
			// 案由可选项列表数据
			caseCauseList: [],
			// 庭审可选列表数据
			caseTrialList: []
		};
	},
	onLoad() {
		this.getcaseTypeList()		// 获取案件类型
		this.getLawyerCauseDataList()	// 获取案由数据列表
		this.getLawyerCauseTrial()		// 获取庭审阶段可选数据列表
	},
	// 页面显示时读取 vuex 中的 vuex_case 对象数据
	onShow() {
		if(this.vuex_case.viewId === '1') {	// 为 原告 数据
			this.addCaseData.case_plaintiff = this.vuex_case
		} else if(this.vuex_case.viewId === '2') {	// 为 被告 数据
			this.addCaseData.case_defendant = this.vuex_case
		}
		// console.log(this.addCaseData);
	},
	methods: {
		// 获取案件类型
		async getcaseTypeList() {
			const res = await this.$u.api.getcaseTypeList()
			if(!res) return
			for(let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				}
				this.caseTypeList.push(item)
			}
			// console.log('案件类型', this.caseTypeList);
		},
		// 获取案由可选数据列表
		async getLawyerCauseDataList() {
			const res = await this.$u.api.getLawyerCauseDataList()
			if(!res) return
			for(let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				}
				this.caseCauseList.push(item)
			}
			// console.log(this.caseCauseList);
		},
		// 获取庭审阶段可选数据列表
		async getLawyerCauseTrial() {
			const res = await this.$u.api.getLawyerCauseTrial()
			// console.log('庭审', res);
			if(!res) return
			for(let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				}
				this.caseTrialList.push(item)
			}
			// console.log(this.caseCauseList);
		},
		// 案子的案子 类型
		selectCaseType(arr) {
			// console.log(arr[0]);
			this.caseTypeValue = arr[0].value;
			this.addCaseData.case_type = arr[0].label;
		},
		// 选择的案子 案由
		selectCaseCause(arr) {
			this.caseCauseValue = arr[0].value;
			this.addCaseData.case_cause = arr[0].label;
		},
		// 选择的案子 庭审
		selectCaseTrial(arr) {
			this.caseTrialValue = arr[0].value;
			this.addCaseData.case_trial = arr[0].label;
		},
		// 底部 确认 按钮点击事件
		async defineClick() {
			// 校验 类型/案由/庭审 信息是否已选择
			if(!this.caseTypeValue || !this.caseCauseValue || !this.caseTrialValue) return this.$u.toast('请先完善案件信息')
			// 校验 原告 信息是否已完善
			if(this.addCaseData.case_plaintiff.viewId != '1') return this.$u.toast('请完善原告信息')
			if(this.addCaseData.case_defendant.viewId != '2') return this.$u.toast('请完善被告信息')
			// TODO:通过表单校验，执行添加按键逻辑
			// console.log('通过校验');
			let params = {
				lawyer_type: this.caseTypeValue,
				lawyer_cause: this.caseCauseValue,
				lawyer_trial: this.caseTrialValue,
				// 原告数据
				plaintiff_identify: this.addCaseData.case_plaintiff.case_IDValue,
				plaintiff_nature: this.addCaseData.case_plaintiff.case_natureValue,
				plaintiff_name: this.addCaseData.case_plaintiff.case_user_name,
				plaintiff_mobile: this.addCaseData.case_plaintiff.case_user_phone,
				plaintiff_legal: this.addCaseData.case_plaintiff.case_user_rep,
				plaintiff_addr: this.addCaseData.case_plaintiff.case_user_adress,
				plaintiff_photo: this.addCaseData.case_plaintiff.photo_url,
				// 被告数据
				defendant_identify: this.addCaseData.case_defendant.case_IDValue,
				defendant_nature: this.addCaseData.case_defendant.case_natureValue,
				defendant_name: this.addCaseData.case_defendant.case_user_name,
				defendant_mobile: this.addCaseData.case_defendant.case_user_phone,
				defendant_legal: this.addCaseData.case_defendant.case_user_rep,
				defendant_addr: this.addCaseData.case_defendant.case_user_adress,
				defendant_photo: this.addCaseData.case_defendant.photo_url,
			}
			// console.log('添加案件所需参数', params);
			const res = await this.$u.api.addLawCaseItem(params)
			if(!res) return
			// 添加案件成功后跳转到 全部案件 页面
			this.$u.vuex('vuex_isSubmit', true)
			this.$u.route({
				type: 'back',
			})
			this.$u.toast('添加案件成功')
		}
	}
};
</script>

<style lang="scss" scoped>
.add-case-detail-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	padding-bottom: 90rpx;
	.case-item-box {
		height: 94rpx;
		background-color: white;
		padding: 0 68rpx 0 26rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		border-bottom: 1px solid #e7eaf0;
		.icon {
			position: absolute;
			top: 50%;
			right: 26rpx;
			transform: translateY(-50%);
		}
	}
}
</style>
